<template>
  <div id="film">
    <div class="top" v-if="isShowTop">
      <div class="left" @click="selectCityFn">城市<van-icon name="arrow-down" size="10px" /></div>
      <div class="center">电影</div>
      <div class="right"></div>
    </div>
    <van-tabs
      v-model="active"
      color="#ff5f16"
      title-active-color="#ff5f16"
      @change="changeTabs"
      :sticky="issticky"
      offset-top="44px">
      <!-- 正在热映 -->
      <van-tab title="正在热映">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false">
          <FilmCover
            v-for="obj in films"
            :key="obj.filmId"
            :filmsObj="obj"></FilmCover>
        </van-list>
      </van-tab>
      <!-- 即将上映 -->
      <van-tab title="即将上映" name="soon">
        <FilmCover
          v-for="obj in comingSoon"
          :key="obj.filmId"
          :filmsObj="obj"></FilmCover>
      </van-tab>
    </van-tabs>
    <!-- 加载中 -->
    <van-loading size="24px" text-color="orange" vertical v-if="showLoading"
      >加载中...</van-loading
    >
  </div>
</template>

<script>
import FilmCover from '@/components/filmCover.vue'
import { getPlayings, getPlaying, getComings } from '../../api/movieApi'

export default {
  name: 'Film',
  components: {
    FilmCover
  },
  data() {
    return {
      active: 0,
      films: [],
      loading: false,
      finished: false,
      showLoading: true,
      comingSoon: [],
      issticky: false,
      isShowTop: false
    }
  },
  mounted() {
    this.getFilmList()
    this.isMonitorScrollFn()
  },
  methods: {
    // 切换tabs
    changeTabs(name) {
      // // 让load事件可再次触发
      // this.finished = false
      if (name === 'soon' && this.comingSoon.length === 0) {
        getComings().then((res) => {
          this.comingSoon = res
        })
      }else{
        // 监听滚动事件
        this.isMonitorScrollFn()
      }
    },
    // 是否监听滚动事件
    isMonitorScrollFn(){
      // 判断滚动条位置
    document.addEventListener('scroll', () => {
      if (window.pageYOffset > 120) {
        this.issticky = true
        this.isShowTop = true
      } else {
        this.issticky = false
        this.isShowTop = false
      }
    })
    },
    // 获取电影列表数据
    getFilmList() {
      getPlayings(1).then((films) => {
        this.films = films
        this.showLoading = false
      })
    },
    // 下拉加载更多
    onLoad() {
      this.loading = true
      getPlaying(2).then(
        // 拿到电影列表数据
        (res) => {
          this.films.push(...res)
          this.loading = false
        }
      )
      this.finished = true
    },
    // 点击选择地区
    selectCityFn(){
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100vw;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  height: 44px;
  line-height: 44px;
  background-color: #fff;
  z-index: 999;
  .left,
  .right {
    flex: 1;
    text-align: center;
    font-size: 15px;
  }
  .center {
    flex: 2;
    text-align: center;
    font-size: 20px;
  }
}
</style>
